<template>
  <div>
    <div ref="chart" style="width: 1200px; height: 400px;"></div>
    <div style="display: flex; width: 100%; height: 400px;">
      <div ref="chart1" style="width: 60%; margin-right: 5%; height: 400px; "></div>
      <div ref="chart2" style="width: 30%; height: 400px"></div>
    </div>
    
  </div>
</template>
<script>

import { Icon } from 'ant-design-vue';
import * as echarts from 'echarts';
const IconFont = Icon.createFromIconfontCN({
  scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js',
});
export default {
  components: {
    IconFont,
  },
  // mixins: [preventBack], //禁止返回上一页
  data() {
    return {
      chart: null,
      chart1: null,
      chart2: null,
    };
  },
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$refs.chart);
      this.chart1 = echarts.init(this.$refs.chart1);
      this.chart2 = echarts.init(this.$refs.chart2);
      const option = {
        tooltip : {
        trigger: 'axis'
    },
    toolbox: {
        show : true,
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            magicType: {show: true, type: ['line', 'bar']},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    calculable : true,
    legend: {
        data:['直方图','正态分布']
    },
    xAxis : [
        {
            type : 'category',
            data : ['50.60','51.01','51.41','51.82','52.22','52.63','53.03','53.44','53.84','54.25','54.66','55.06','55.47','55.87','56.28','56.68','57.09','57.49','57.90']
        }
    ],
    yAxis : [
        {
            type : 'value',
            name : '',
            axisLabel : {
                formatter: '{value} '
            },
          min:0,
          max:70,
          minInterval:10,
          maxInterval:10
        },
        {
            type : 'value',
            name : '',
            axisLabel : {
                formatter: '{value} '
            },
          min:0,
          max:0.4,
          minInterval:0.05,
          maxInterval:0.05
        }
    ],
    series : [

        {
            name:'直方图',
            type:'bar',
            data:[1, 0, 0, 1, 6, 8, 23, 59, 38, 38, 36, 28, 18, 22, 10, 3, 6, 0, 3]
        },
        {
            name:'正态分布',
            type:'line',
            yAxisIndex: 1,
            data:[0.00347, 0.00948, 0.02291, 0.04891, 0.09224, 0.15368, 0.22623, 0.29422, 0.33806, 0.34317, 0.30777, 0.24385, 0.17070, 0.10557, 0.05768, 0.02784, 0.01188, 0.00447, 0.00149]
        }
    ]
      };
      this.chart.setOption(option);
      this.chart1.setOption(option);
      this.chart2.setOption(option);
    }
  }
};


</script>
<style scoped>
.icons-list >>> .anticon {
  margin-right: 6px;
  font-size: 24px;
}
</style>